<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>

<script>
      var x = document.getElementById("demo");

      function getLocation() {
          console.info("getLocation working")
          alert("1");
          if (navigator.geolocation) {
              alert("2");
              navigator.geolocation.getCurrentPosition(showPosition,showError);
          } else {
              alert("3");
              x.innerHTML = "Geolocation is not supported by this browser.";
            }
      }

      function showPosition(position) {
          alert("Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude);
          x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
      }
      
      function showError(error) {
          alert("showError:"+error.code);
          switch(error.code) {
          case error.PERMISSION_DENIED:
              x.innerHTML = "User denied the request for Geolocation."
              break;
          case error.POSITION_UNAVAILABLE:
              x.innerHTML = "Location information is unavailable."
              break;
          case error.TIMEOUT:
              x.innerHTML = "The request to get user location timed out."
              break;
          case error.UNKNOWN_ERROR:
              x.innerHTML = "An unknown error occurred."
              break;
      }
}

</script>

</body>
</html>